<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Selection</span></h1>
        <p>DataTable provides single and multiple selection modes based on row click or using radio button and checkbox elements.</p>
    </div>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>

    <div class="card">
        <h5>Single</h5>
        <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
        <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct1" dataKey="code">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr [pSelectableRow]="product">
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Multiple</h5>
        <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false enables multiple selection without meta key.</p>
        
        <p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts1" [metaKeySelection]="true" dataKey="code">
            <ng-template pTemplate="caption">
                Multiple Selection with MetaKey
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
                <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>

        <p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts2" styleClass="p-mt-5" dataKey="code">
            <ng-template pTemplate="caption">
                Multiple Selection without MetaKey
            </ng-template>
            <ng-template pTemplate="header">
                <tr [pSelectableRow]="product">
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
                <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Column Selection</h5>
        <p>Selection using custom elements.</p>

        <p-table [value]="products">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                    <th style="width:4rem"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                    <td>
                        <button type="button" pButton pRipple icon="pi pi-search" (click)="selectProduct(product)"></button>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Events</h5>
        <p>onRowSelect and onRowUnselect are available as selection events.</p>
        <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct2" dataKey="code"
            (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr [pSelectableRow]="product">
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>RadioButton</h5>
        <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
        <p-table [value]="products" [(selection)]="selectedProduct3" dataKey="code">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 3rem"></th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>
                        <p-tableRadioButton [value]="product"></p-tableRadioButton>
                    </td>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Checkbox Selection</h5>
        <p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>

        <p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 3rem">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td>
                        <p-tableCheckbox [value]="product"></p-tableCheckbox>
                    </td>
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.quantity}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tableselection-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Single&lt;/h5&gt;
    &lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
    &lt;p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct1" dataKey="code"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr [pSelectableRow]="product"&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Multiple&lt;/h5&gt;
    &lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false enables multiple selection without meta key.&lt;/p&gt;
    
    &lt;p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts1" [metaKeySelection]="true" dataKey="code"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            Multiple Selection with MetaKey
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header" &gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product let-rowIndex="rowIndex"&gt;
            &lt;tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex"&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;

    &lt;p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts2" styleClass="p-mt-5" dataKey="code"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            Multiple Selection without MetaKey
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr [pSelectableRow]="product"&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product let-rowIndex="rowIndex"&gt;
            &lt;tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex"&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Column Selection&lt;/h5&gt;
    &lt;p&gt;Selection using custom elements.&lt;/p&gt;

    &lt;p-table [value]="products"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
                &lt;th style="width:4rem"&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
                &lt;td&gt;
                    &lt;button type="button" pButton pRipple icon="pi pi-search" (click)="selectProduct(product)"&gt;&lt;/button&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Events&lt;/h5&gt;
    &lt;p&gt;onRowSelect and onRowUnselect are available as selection events.&lt;/p&gt;
    &lt;p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct2" dataKey="code"
        (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr [pSelectableRow]="product"&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;RadioButton&lt;/h5&gt;
    &lt;p&gt;Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".&lt;/p&gt;
    &lt;p-table [value]="products" [(selection)]="selectedProduct3" dataKey="code"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="width: 3rem"&gt;&lt;/th&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;p-tableRadioButton [value]="product"&gt;&lt;/p-tableRadioButton&gt;
                &lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Checkbox Selection&lt;/h5&gt;
    &lt;p&gt;Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".&lt;/p&gt;

    &lt;p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="width: 3rem"&gt;
                    &lt;p-tableHeaderCheckbox&gt;&lt;/p-tableHeaderCheckbox&gt;
                &lt;/th&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;p-tableCheckbox [value]="product"&gt;&lt;/p-tableCheckbox&gt;
                &lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;product.quantity&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';
import &#123; MessageService &#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './tableselectiondemo.html',
    providers: [MessageService]
&#125;)
export class TableSelectionDemo implements OnInit &#123;

    products: Product[];

    selectedProduct1: Product;

    selectedProduct2: Product;

    selectedProduct3: Product;

    selectedProducts1: Product[];

    selectedProducts2: Product[];

    selectedProducts3: Product[];

    constructor(private productService: ProductService, private messageService: MessageService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products = data);
    &#125;

    selectProduct(product: Product) &#123;
        this.messageService.add(&#123;severity:'info', summary:'Product Selected', detail: product.name&#125;);
    &#125;

    onRowSelect(event) &#123;
        this.messageService.add(&#123;severity:'info', summary:'Product Selected', detail: event.data.name&#125;);
    &#125;

    onRowUnselect(event) &#123;
        this.messageService.add(&#123;severity:'info', summary:'Product Unselected',  detail: event.data.name&#125;);
    &#125;

&#125;
</app-code>

        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tableselection-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
